<template>
    <div>
        <el-breadcrumb separator=">">
            <el-breadcrumb-item :to="{ path: '/' }">{{$t('目录.仪表盘')}}</el-breadcrumb-item>

            <el-breadcrumb-item v-if="lastUrl == '2'" :to="{ path: '/panel/rank2' }">{{$t('目录.temu数据分析')}}</el-breadcrumb-item>
            <el-breadcrumb-item v-else-if="lastUrl == '2_1'" :to="{ path: '/panel/rank2_1' }">{{$t('目录.temu数据分析')}}</el-breadcrumb-item>
            <el-breadcrumb-item v-else-if="lastUrl == '2_2'" :to="{ path: '/panel/rank2_2' }">{{$t('目录.temu数据分析')}}</el-breadcrumb-item>
            <el-breadcrumb-item >{{$t('商品id')}}:{{params.goodsId}}</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="detail3-card">
            <div style="display: flex;">
                <div class="detail3-card-title" >{{$t('temu.商品详情')}}</div>
                <div>
                    <el-button class="back-btn" @click="backLast()">{{ $t('返回') }}</el-button>
                </div>
            </div>
            <el-divider></el-divider>
            <div v-if="!isGetData">
                <el-skeleton :rows="10" />
            </div>
            <div v-else>
                <div style="display: flex;">
                    <div>
                        <img :src="goods.thumbnail" style="width: 9.375rem;height: 9.375rem;"/>
                    </div>
                    <div>
                        <div style="width: 55.56rem;min-height: 1.25rem;margin: 0.2rem 0 0 1rem;font-size:1.125rem">
                          <div v-if="goods.goodsNameEn == null || goods.goodsNameEn== '' || goods.goodsNameEn == undefined">{{ goods.goodsName }}</div>
                          <div v-else>{{ goods.goodsNameEn }}</div>
                        </div>
                        <div style="display: flex;font-size: 0.875rem;color:rgb(78,89,105);margin: 0.6rem 0 0 1rem;">
                            <div v-for="(item,index) in goods.catItems" :key="index" style="display: flex;">
                                <div>{{ item.catNameEn }} </div>
                                <div style="width: 0.8rem;color: rgb(201,205,212);"></div>
                                <div v-if="index !== goods.catItems.length-1 && goods.catItems.length !== 0" style="color:rgb(201,205,212)">/</div>
                                <div style="width: 0.8rem;color: rgb(201,205,212);"></div>
                            </div>
                        </div>
                      <div v-if="isLogin">
                        <div v-show="isVip" style="display: flex;color:#ff5c00;font-weight: 600;font-size: 1.125rem;margin: 0.6rem 0 0 1rem;">
                          <div v-if="goods.minPrice==null || goods.minPrice == ''">{{symbol}}{{ goods.maxPrice }}</div>
                          <div v-else-if="goods.maxPrice==null || goods.maxPrice == ''">{{symbol}}{{ goods.minPrice }}</div>
                          <div v-else>
                            <div v-if="goods.minPrice < goods.maxPrice">
                              {{symbol}}{{ goods.minPrice }} - {{symbol}}{{ goods.maxPrice }}
                            </div>
                            <div v-else-if="goods.minPrice === goods.maxPrice">
                              {{symbol}}{{ goods.minPrice }}
                            </div>
                            <div v-else-if="goods.minPrice > goods.maxPrice">
                              {{symbol}}{{ goods.maxPrice }} - {{symbol}}{{ goods.minPrice }}
                            </div>
                          </div>
                        </div>
                        <div v-show="!isVip" style="display: flex;color:#ff5c00;font-weight: 600;font-size: 1.125rem;margin: 0.6rem 0 0 1rem;">
                          <div>{{symbol}}? ? ? - {{symbol}} ? ? ?</div>
                        </div>
                      </div>
                      <div v-else>
                        <div style="display: flex;color:#ff5c00;font-weight: 600;font-size: 1.125rem;margin: 0.6rem 0 0 1rem;">
                          <div v-if="goods.minPrice==null || goods.minPrice == ''">{{symbol}}{{ goods.maxPrice }}</div>
                          <div v-else-if="goods.maxPrice==null || goods.maxPrice == ''">{{symbol}}{{ goods.minPrice }}</div>
                          <div v-else>
                            <div v-if="goods.minPrice < goods.maxPrice">
                              {{symbol}}{{ goods.minPrice }} - {{symbol}}{{ goods.maxPrice }}
                            </div>
                            <div v-else-if="goods.minPrice === goods.maxPrice">
                              {{symbol}}{{ goods.minPrice }}
                            </div>
                            <div v-else-if="goods.minPrice > goods.maxPrice">
                              {{symbol}}{{ goods.maxPrice }} - {{symbol}}{{ goods.minPrice }}
                            </div>
                          </div>
                        </div>
                      </div>
                        <div style="margin-left: 1rem;width: 63.5rem;">
                            <el-divider></el-divider>
                        </div>
                      <!--登录时显示-->
                      <div v-if="isLogin">
                        <!-- 不是vip时显示 -->
                        <div v-show="!isVip" style="margin-left: -5rem">
                          <div class="can-not-show" style="width: 72.5rem;display: flex;justify-content: center">{{ $t('没开vip') }}</div>
                          <div style="margin-top: 1rem;display: flex;justify-content: center">
                            <el-button style="background-color:#165DFF;color:#fff;height: 2.5rem;" @click="shiftReserve()">{{ $t('没开vip.按钮') }}</el-button>
                          </div>
                        </div>
                        <div v-show="isVip">
                          <div style="width: 63.5rem;margin: 0 auto;background-color: rgb(247,248,250);height: 2rem;margin-left: 1rem;
                                border: 1px solid rgb(229,230,235);font-size: 0.875rem;color:rgb(134,144,156);border-bottom: none;">
                            <el-row>
                              <el-col :span="6" style="line-height: 2rem;padding-left: 1rem;">{{$t('上架时间')}}</el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">{{$t('开店时间')}}</el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">{{$t('库存')}}</el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">{{$t('上次更新时间')}}</el-col>
                            </el-row>
                          </div>
                          <div style="width: 63.5rem;margin: 0 auto;height: 2rem;margin-left: 1rem;
                                border: 1px solid rgb(229,230,235);font-size: 0.875rem;color:#000;border-bottom: none;">
                            <el-row>
                              <el-col :span="6" style="line-height: 2rem;padding-left: 1rem;">
                                <div v-if="goods.onSaleTime == null || goods.onSaleTime.length==0 || goods.onSaleTime== ''">
                                  -
                                </div>
                                <div v-else> {{goods.onSaleTime.slice(0,10)}} </div>
                              </el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">
                                <div v-if="goods.mallOpenTime == null || goods.mallOpenTime.length==0 || goods.mallOpenTime== ''">
                                  -
                                </div>
                                <div v-else> {{goods.mallOpenTime.slice(0,10)}} </div>
                              </el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">
                                <div v-if="goods.quantity == null || goods.quantity == '' || goods.quantity== 0">
                                  -
                                </div>
                                <div v-else> {{goods.quantity}} </div>
                              </el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">
                                <div v-if="goods.updateTime == null || goods.updateTime.length==0 || goods.updateTime== ''">
                                  -
                                </div>
                                <div v-else> {{goods.updateTime.slice(0,10)}} </div>
                              </el-col>
                            </el-row>
                          </div>
                          <div style="width: 63.5rem;margin: 0 auto;background-color: rgb(247,248,250);height: 2rem;margin-left: 1rem;
                                border: 1px solid rgb(229,230,235);font-size: 0.875rem;color:rgb(134,144,156);border-bottom: none;">
                            <el-row>
                              <el-col :span="6" style="line-height: 2rem;padding-left: 1rem;">{{$t('总销量')}}</el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">{{$t('日销量')}}</el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">{{$t('周销量')}}</el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">{{$t('月销量')}}</el-col>
                            </el-row>
                          </div>
                          <div style="width: 63.5rem;margin: 0 auto;height: 2rem;margin-left: 1rem;
                                border: 1px solid rgb(229,230,235);font-size: 0.875rem;color:#000;border-bottom: none;">
                            <el-row>
                              <el-col :span="6" style="line-height: 2rem;padding-left: 1rem;">
                                <div v-if="goods.sold == null || goods.sold == '' || goods.sold== 0">
                                  -
                                </div>
                                <div v-else> {{parseInt(goods.sold)}} </div>
                              </el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">
                                <TableCell2 :data="goods.daySold" :rate="goods.daySoldRate"></TableCell2>
                              </el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">
                                <TableCell2 :data="goods.weekSold" :rate="goods.weekSoldRate"></TableCell2>
                              </el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">
                                <TableCell2 :data="goods.monthSold" :rate="goods.monthSoldRate"></TableCell2>
                              </el-col>
                            </el-row>
                          </div>
                          <div style="width: 63.5rem;margin: 0 auto;background-color: rgb(247,248,250);height: 2rem;margin-left: 1rem;
                                border: 1px solid rgb(229,230,235);font-size: 0.875rem;color:rgb(134,144,156);border-bottom: none;">
                            <el-row>
                              <el-col :span="6" style="line-height: 2rem;padding-left: 1rem;">{{$t('总销售额')}}</el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">{{$t('日销售额')}}</el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">{{$t('周销售额')}}</el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">{{$t('月销售额')}}</el-col>
                            </el-row>
                          </div>
                          <div style="width: 63.5rem;margin: 0 auto;height: 2rem;margin-left: 1rem;
                                border: 1px solid rgb(229,230,235);font-size: 0.875rem;color:#000;border-bottom: none;">
                            <el-row>
                              <el-col :span="6" style="line-height: 2rem;padding-left: 1rem;">
                                <div v-if="goods.sales == null || goods.sales == '' || goods.sales== 0">
                                  -
                                </div>
                                <div v-else> {{parseInt(goods.sales)}} </div>
                              </el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">
                                <TableCell2 :data="goods.daySales" :rate="goods.daySalesRate"></TableCell2>
                              </el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">
                                <TableCell2 :data="goods.weekSales" :rate="goods.weekSalesRate"></TableCell2>
                              </el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">
                                <TableCell2 :data="goods.monthSales" :rate="goods.monthSalesRate"></TableCell2>
                              </el-col>
                            </el-row>
                          </div>
                          <div style="width: 63.5rem;margin: 0 auto;background-color: rgb(247,248,250);height: 2rem;margin-left: 1rem;
                                border: 1px solid rgb(229,230,235);font-size: 0.875rem;color:rgb(134,144,156);border-bottom: none;">
                            <el-row>
                              <el-col :span="6" style="line-height: 2rem;padding-left: 1rem;">{{$t('Temu.评分')}}</el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">{{$t('评论数')}}</el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">{{$t('店铺销量')}}</el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;"> - </el-col>
                            </el-row>
                          </div>
                          <div style="width: 63.5rem;margin: 0 auto;height: 2rem;margin-left: 1rem;
                                border: 1px solid rgb(229,230,235);font-size: 0.875rem;color:#000;">
                            <el-row>
                              <el-col :span="6" style="line-height: 2rem;padding-left: 1rem;">
                                <div v-if="goods.goodsScore == null || goods.goodsScore == '' || goods.goodsScore== 0">
                                  -
                                </div>
                                <div v-else> {{goods.goodsScore}} </div>
                              </el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">
                                <div v-if="goods.reviewNum == null || goods.reviewNum == '' || goods.reviewNum== 0">
                                  -
                                </div>
                                <div v-else> {{goods.reviewNum}} </div>
                              </el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">
                                <div v-if="goods.mallSold == null || goods.mallSold == '' || goods.mallSold== 0">
                                  -
                                </div>
                                <div v-else> {{goods.mallSold}} </div>
                              </el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;"> - </el-col>
                            </el-row>
                          </div>
                        </div>
                      </div>
                      <!--未登录时显示-->
                      <div v-else>
                        <div>
                          <div style="width: 63.5rem;margin: 0 auto;background-color: rgb(247,248,250);height: 2rem;margin-left: 1rem;
                                border: 1px solid rgb(229,230,235);font-size: 0.875rem;color:rgb(134,144,156);border-bottom: none;">
                            <el-row>
                              <el-col :span="6" style="line-height: 2rem;padding-left: 1rem;">{{$t('上架时间')}}</el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">{{$t('开店时间')}}</el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">{{$t('库存')}}</el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">{{$t('上次更新时间')}}</el-col>
                            </el-row>
                          </div>
                          <div style="width: 63.5rem;margin: 0 auto;height: 2rem;margin-left: 1rem;
                                border: 1px solid rgb(229,230,235);font-size: 0.875rem;color:#000;border-bottom: none;">
                            <el-row>
                              <el-col :span="6" style="line-height: 2rem;padding-left: 1rem;">
                                <div v-if="goods.onSaleTime == null || goods.onSaleTime.length==0 || goods.onSaleTime== ''">
                                  -
                                </div>
                                <div v-else> {{goods.onSaleTime.slice(0,10)}} </div>
                              </el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">
                                <div v-if="goods.mallOpenTime == null || goods.mallOpenTime.length==0 || goods.mallOpenTime== ''">
                                  -
                                </div>
                                <div v-else> {{goods.mallOpenTime.slice(0,10)}} </div>
                              </el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">
                                <div v-if="goods.quantity == null || goods.quantity == '' || goods.quantity== 0">
                                  -
                                </div>
                                <div v-else> {{goods.quantity}} </div>
                              </el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">
                                <div v-if="goods.updateTime == null || goods.updateTime.length==0 || goods.updateTime== ''">
                                  -
                                </div>
                                <div v-else> {{goods.updateTime.slice(0,10)}} </div>
                              </el-col>
                            </el-row>
                          </div>
                          <div style="width: 63.5rem;margin: 0 auto;background-color: rgb(247,248,250);height: 2rem;margin-left: 1rem;
                                border: 1px solid rgb(229,230,235);font-size: 0.875rem;color:rgb(134,144,156);border-bottom: none;">
                            <el-row>
                              <el-col :span="6" style="line-height: 2rem;padding-left: 1rem;">{{$t('总销量')}}</el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">{{$t('日销量')}}</el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">{{$t('周销量')}}</el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">{{$t('月销量')}}</el-col>
                            </el-row>
                          </div>
                          <div style="width: 63.5rem;margin: 0 auto;height: 2rem;margin-left: 1rem;
                                border: 1px solid rgb(229,230,235);font-size: 0.875rem;color:#000;border-bottom: none;">
                            <el-row>
                              <el-col :span="6" style="line-height: 2rem;padding-left: 1rem;">
                                <div v-if="goods.sold == null || goods.sold == '' || goods.sold== 0">
                                  -
                                </div>
                                <div v-else> {{parseInt(goods.sold)}} </div>
                              </el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">
                                <TableCell2 :data="goods.daySold" :rate="goods.daySoldRate"></TableCell2>
                              </el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">
                                <TableCell2 :data="goods.weekSold" :rate="goods.weekSoldRate"></TableCell2>
                              </el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">
                                <TableCell2 :data="goods.monthSold" :rate="goods.monthSoldRate"></TableCell2>
                              </el-col>
                            </el-row>
                          </div>
                          <div style="width: 63.5rem;margin: 0 auto;background-color: rgb(247,248,250);height: 2rem;margin-left: 1rem;
                                border: 1px solid rgb(229,230,235);font-size: 0.875rem;color:rgb(134,144,156);border-bottom: none;">
                            <el-row>
                              <el-col :span="6" style="line-height: 2rem;padding-left: 1rem;">{{$t('总销售额')}}</el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">{{$t('日销售额')}}</el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">{{$t('周销售额')}}</el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">{{$t('月销售额')}}</el-col>
                            </el-row>
                          </div>
                          <div style="width: 63.5rem;margin: 0 auto;height: 2rem;margin-left: 1rem;
                                border: 1px solid rgb(229,230,235);font-size: 0.875rem;color:#000;border-bottom: none;">
                            <el-row>
                              <el-col :span="6" style="line-height: 2rem;padding-left: 1rem;">
                                <div v-if="goods.sales == null || goods.sales == '' || goods.sales== 0">
                                  -
                                </div>
                                <div v-else> {{parseInt(goods.sales)}} </div>
                              </el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">
                                <TableCell2 :data="goods.daySales" :rate="goods.daySalesRate"></TableCell2>
                              </el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">
                                <TableCell2 :data="goods.weekSales" :rate="goods.weekSalesRate"></TableCell2>
                              </el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">
                                <TableCell2 :data="goods.monthSales" :rate="goods.monthSalesRate"></TableCell2>
                              </el-col>
                            </el-row>
                          </div>
                          <div style="width: 63.5rem;margin: 0 auto;background-color: rgb(247,248,250);height: 2rem;margin-left: 1rem;
                                border: 1px solid rgb(229,230,235);font-size: 0.875rem;color:rgb(134,144,156);border-bottom: none;">
                            <el-row>
                              <el-col :span="6" style="line-height: 2rem;padding-left: 1rem;">{{$t('Temu.评分')}}</el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">{{$t('评论数')}}</el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">{{$t('店铺销量')}}</el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;"> - </el-col>
                            </el-row>
                          </div>
                          <div style="width: 63.5rem;margin: 0 auto;height: 2rem;margin-left: 1rem;
                                border: 1px solid rgb(229,230,235);font-size: 0.875rem;color:#000;">
                            <el-row>
                              <el-col :span="6" style="line-height: 2rem;padding-left: 1rem;">
                                <div v-if="goods.goodsScore == null || goods.goodsScore == '' || goods.goodsScore== 0">
                                  -
                                </div>
                                <div v-else> {{goods.goodsScore}} </div>
                              </el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">
                                <div v-if="goods.reviewNum == null || goods.reviewNum == '' || goods.reviewNum== 0">
                                  -
                                </div>
                                <div v-else> {{goods.reviewNum}} </div>
                              </el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;">
                                <div v-if="goods.mallSold == null || goods.mallSold == '' || goods.mallSold== 0">
                                  -
                                </div>
                                <div v-else> {{goods.mallSold}} </div>
                              </el-col>
                              <el-col :span="6" style="border-left: 1px solid rgb(229,230,235);height: 2rem;line-height: 2rem;padding-left: 1rem;"> - </el-col>
                            </el-row>
                          </div>
                        </div>
                      </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="detail3-card" style="height: 30.25rem;">
            <div class="detail3-card-title">{{ $t('趋势数据1') }}</div>
            <el-divider></el-divider>
            <div v-if="isLogin">
              <!-- 不是vip时显示 -->
              <div v-show="!isVip" style="margin-top: 10rem">
                <div class="can-not-show" style="display: flex;justify-content: center">{{ $t('没开vip') }}</div>
                <div style="margin-top: 1rem;display: flex;justify-content: center">
                  <el-button style="background-color:#165DFF;color:#fff;height: 2.5rem;" @click="shiftReserve()">{{ $t('没开vip.按钮') }}</el-button>
                </div>
              </div>
              <div style="width: 80rem;" v-show="isVip">
                <el-tabs v-model="activeName1" class="demo-tabs" @tab-click="handleClick" >
                  <!-- <el-tab-pane :label="$t('总销量')" name="1">
                      <template #label>
                          <span class="custom-tab-label">{{$t('总销量')}}</span>
                      </template>
                      <div id="line1" style="width: 74.25rem;height: 21.875rem;"></div>
                  </el-tab-pane> -->
                  <!-- <el-tab-pane :label="$t('总销售额')" name="2">
                      <template #label>
                          <span class="custom-tab-label">{{$t('总销售额')}}</span>
                      </template>
                      <div id="line2" style="width: 74.25rem;height: 21.875rem;"></div>
                  </el-tab-pane> -->
                  <el-tab-pane :label="$t('详情.折线图.价格')" name="3">
                    <template #label>
                      <span class="custom-tab-label">{{$t('详情.折线图.价格')}}</span>
                    </template>
                    <div id="line3" style="width: 74.25rem;height: 21.875rem;"></div>
                  </el-tab-pane>
                  <!-- <el-tab-pane :label="$t('日销量')" name="4">
                      <template #label>
                          <span class="custom-tab-label">{{$t('日销量')}}</span>
                      </template>
                    <div id="line4" style="width: 74.25rem;height: 21.875rem;"></div>
                  </el-tab-pane> -->
                  <!-- <el-tab-pane :label="$t('周销量')" name="5">
                      <template #label>
                          <span class="custom-tab-label">{{$t('周销量')}}</span>
                      </template>
                    <div id="line5" style="width: 74.25rem;height: 21.875rem;"></div>
                  </el-tab-pane>
                  <el-tab-pane :label="$t('月销量')" name="6">
                      <template #label>
                          <span class="custom-tab-label">{{$t('月销量')}}</span>
                      </template>
                    <div id="line6" style="width: 74.25rem;height: 21.875rem;"></div>
                  </el-tab-pane> -->
                  <!-- <el-tab-pane :label="$t('日销售额')" name="7">
                      <template #label>
                          <span class="custom-tab-label">{{$t('日销售额')}}</span>
                      </template>
                    <div id="line7" style="width: 74.25rem;height: 21.875rem;"></div>
                  </el-tab-pane>
                  <el-tab-pane :label="$t('周销售额')" name="8">
                      <template #label>
                          <span class="custom-tab-label">{{$t('周销售额')}}</span>
                      </template>
                    <div id="line8" style="width: 74.25rem;height: 21.875rem;"></div>
                  </el-tab-pane>
                  <el-tab-pane :label="$t('月销售额')" name="9">
                      <template #label>
                          <span class="custom-tab-label">{{$t('月销售额')}}</span>
                      </template>
                    <div id="line9" style="width: 74.25rem;height: 21.875rem;"></div>
                  </el-tab-pane> -->
                  <el-tab-pane :label="$t('详情.折线图.库存')" name="10">
                    <template #label>
                      <span class="custom-tab-label">{{$t('详情.折线图.库存')}}</span>
                    </template>
                    <div id="line10" style="width: 74.25rem;height: 21.875rem;"></div>
                  </el-tab-pane>
                  <el-tab-pane :label="$t('详情.折线图.评分')" name="11">
                    <template #label>
                      <span class="custom-tab-label">{{$t('详情.折线图.评分')}}</span>
                    </template>
                    <div id="line11" style="width: 74.25rem;height: 21.875rem;"></div>
                  </el-tab-pane>
                  <el-tab-pane :label="$t('详情.折线图.评论数')" name="12">
                    <template #label>
                      <span class="custom-tab-label">{{$t('详情.折线图.评论数')}}</span>
                    </template>
                    <div id="line12" style="width: 74.25rem;height: 21.875rem;"></div>
                  </el-tab-pane>
                  <!-- <el-tab-pane :label="$t('详情.折线图.日增长率')" name="13">
                      <template #label>
                          <span class="custom-tab-label">{{$t('详情.折线图.日增长率')}}</span>
                      </template>
                    <div id="line13" style="width: 74.25rem;height: 21.875rem;"></div>
                  </el-tab-pane> -->
                </el-tabs>
              </div>
            </div>
            <div v-else>
              <div style="width: 80rem;">
                <el-tabs v-model="activeName1" class="demo-tabs" @tab-click="handleClick" >
                  <!-- <el-tab-pane :label="$t('总销量')" name="1">
                      <template #label>
                          <span class="custom-tab-label">{{$t('总销量')}}</span>
                      </template>
                      <div id="line1" style="width: 74.25rem;height: 21.875rem;"></div>
                  </el-tab-pane> -->
                  <!-- <el-tab-pane :label="$t('总销售额')" name="2">
                      <template #label>
                          <span class="custom-tab-label">{{$t('总销售额')}}</span>
                      </template>
                      <div id="line2" style="width: 74.25rem;height: 21.875rem;"></div>
                  </el-tab-pane> -->
                  <el-tab-pane :label="$t('详情.折线图.价格')" name="3">
                    <template #label>
                      <span class="custom-tab-label">{{$t('详情.折线图.价格')}}</span>
                    </template>
                    <div id="line3" style="width: 74.25rem;height: 21.875rem;"></div>
                  </el-tab-pane>
                  <!-- <el-tab-pane :label="$t('日销量')" name="4">
                      <template #label>
                          <span class="custom-tab-label">{{$t('日销量')}}</span>
                      </template>
                    <div id="line4" style="width: 74.25rem;height: 21.875rem;"></div>
                  </el-tab-pane> -->
                  <!-- <el-tab-pane :label="$t('周销量')" name="5">
                      <template #label>
                          <span class="custom-tab-label">{{$t('周销量')}}</span>
                      </template>
                    <div id="line5" style="width: 74.25rem;height: 21.875rem;"></div>
                  </el-tab-pane>
                  <el-tab-pane :label="$t('月销量')" name="6">
                      <template #label>
                          <span class="custom-tab-label">{{$t('月销量')}}</span>
                      </template>
                    <div id="line6" style="width: 74.25rem;height: 21.875rem;"></div>
                  </el-tab-pane> -->
                  <!-- <el-tab-pane :label="$t('日销售额')" name="7">
                      <template #label>
                          <span class="custom-tab-label">{{$t('日销售额')}}</span>
                      </template>
                    <div id="line7" style="width: 74.25rem;height: 21.875rem;"></div>
                  </el-tab-pane>
                  <el-tab-pane :label="$t('周销售额')" name="8">
                      <template #label>
                          <span class="custom-tab-label">{{$t('周销售额')}}</span>
                      </template>
                    <div id="line8" style="width: 74.25rem;height: 21.875rem;"></div>
                  </el-tab-pane>
                  <el-tab-pane :label="$t('月销售额')" name="9">
                      <template #label>
                          <span class="custom-tab-label">{{$t('月销售额')}}</span>
                      </template>
                    <div id="line9" style="width: 74.25rem;height: 21.875rem;"></div>
                  </el-tab-pane> -->
                  <el-tab-pane :label="$t('详情.折线图.库存')" name="10">
                    <template #label>
                      <span class="custom-tab-label">{{$t('详情.折线图.库存')}}</span>
                    </template>
                    <div id="line10" style="width: 74.25rem;height: 21.875rem;"></div>
                  </el-tab-pane>
                  <el-tab-pane :label="$t('详情.折线图.评分')" name="11">
                    <template #label>
                      <span class="custom-tab-label">{{$t('详情.折线图.评分')}}</span>
                    </template>
                    <div id="line11" style="width: 74.25rem;height: 21.875rem;"></div>
                  </el-tab-pane>
                  <el-tab-pane :label="$t('详情.折线图.评论数')" name="12">
                    <template #label>
                      <span class="custom-tab-label">{{$t('详情.折线图.评论数')}}</span>
                    </template>
                    <div id="line12" style="width: 74.25rem;height: 21.875rem;"></div>
                  </el-tab-pane>
                  <!-- <el-tab-pane :label="$t('详情.折线图.日增长率')" name="13">
                      <template #label>
                          <span class="custom-tab-label">{{$t('详情.折线图.日增长率')}}</span>
                      </template>
                    <div id="line13" style="width: 74.25rem;height: 21.875rem;"></div>
                  </el-tab-pane> -->
                </el-tabs>
              </div>
            </div>
        </div>
        <div class="detail3-card" style="height: 30.25rem;">
            <div class="detail3-card-title">{{ $t('趋势数据2') }}</div>
            <el-divider></el-divider>
            <div v-if="isLogin">
              <!-- 不是vip时显示 -->
              <div v-show="!isVip" style="margin-top: 8rem">
                <div class="can-not-show" style="display: flex;justify-content: center">{{ $t('没开vip') }}</div>
                <div style="margin-top: 1rem;display: flex;justify-content: center">
                  <el-button style="background-color:#165DFF;color:#fff;height: 2.5rem;" @click="shiftReserve()">{{ $t('没开vip.按钮') }}</el-button>
                </div>
              </div>
              <div style="width: 80rem;" v-show="isVip">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" >
                  <el-tab-pane :label="$t('总销量')" name="1">
                    <template #label>
                      <span class="custom-tab-label">{{$t('总销量')}}</span>
                    </template>
                    <div id="line1" style="width: 74.25rem;height: 21.875rem;"></div>
                  </el-tab-pane>
                  <el-tab-pane :label="$t('日销量')" name="4">
                    <template #label>
                      <span class="custom-tab-label">{{$t('日销量')}}</span>
                    </template>
                    <div id="line4" style="width: 74.25rem;height: 21.875rem;"></div>
                  </el-tab-pane>
                  <el-tab-pane :label="$t('详情.折线图.日增长率')" name="13">
                    <template #label>
                      <span class="custom-tab-label">{{$t('详情.折线图.日增长率')}}</span>
                    </template>
                    <div id="line13" style="width: 74.25rem;height: 21.875rem;"></div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
            <div v-else>
              <div style="width: 80rem;">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" >
                  <el-tab-pane :label="$t('总销量')" name="1">
                    <template #label>
                      <span class="custom-tab-label">{{$t('总销量')}}</span>
                    </template>
                    <div id="line1" style="width: 74.25rem;height: 21.875rem;"></div>
                  </el-tab-pane>
                  <el-tab-pane :label="$t('日销量')" name="4">
                    <template #label>
                      <span class="custom-tab-label">{{$t('日销量')}}</span>
                    </template>
                    <div id="line4" style="width: 74.25rem;height: 21.875rem;"></div>
                  </el-tab-pane>
                  <el-tab-pane :label="$t('详情.折线图.日增长率')" name="13">
                    <template #label>
                      <span class="custom-tab-label">{{$t('详情.折线图.日增长率')}}</span>
                    </template>
                    <div id="line13" style="width: 74.25rem;height: 21.875rem;"></div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
        </div>
        <!-- <div class="detail3-card" style="min-height: 30.25rem;">
            <div class="detail3-card-title">{{ $t('sku数据') }}</div>
            <el-divider></el-divider>
            <div v-show="!isVip">
                <div class="can-not-show" style="width: 72.5rem;">{{ $t('没开vip') }}</div>
                <div style="margin-top: 1rem;margin-left: 33rem;">
                    <el-button style="background-color:#165DFF;color:#fff;height: 2.5rem;" @click="shiftReserve()">{{ $t('没开vip.按钮') }}</el-button>
                </div>
            </div>
            <div style="width: 80rem;" v-show="isVip">
                <div id="pieChart" style="width: 22.5rem;height: 18.75rem;margin: 0 auto;"></div>
                <div>
                    <el-table :data="sku" style="width: 100%" :header-cell-style="{background:'#f2f3f8',color:'#101010',height:'40px','text-align':'center'}"
                    :cell-style="{'text-align':'center'}" :row-style="{height:'78px'}">
                        <el-table-column prop="thumbUrl" label="缩略图" width="120">
                            <template #default="scope">
                                <div style="cursor: pointer;">
                                    <img :src="scope.row.thumbUrl" style="width: 3.75rem;height: 3.75rem;"/>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="specs" label="规格" >
                            <template #default="scope">
                                <el-button style="cursor: pointer;">
                                    {{scope.row.specs[0].specKey}}:{{scope.row.specs[0].specValue}}
                                </el-button>
                            </template>
                        </el-table-column>
                        <el-table-column prop="price" :label="this.$t('价格')" sortable="custom" >
                            <template #default="scope">
                                <div style="color: #ff5c00;font-size: 14px">
                                    <div v-if="scope.row.price == null || scope.row.price == ''">
                                        <span>-</span>
                                    </div>
                                    <div v-else>
                                        <span>{{ scope.row.price }}</span>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="quantity" :label="this.$t('总销量')" sortable="custom" width="190">
                            <template #default="scope">
                                <div style="font-size: 14px">
                                    <div v-if="scope.row.quantity == null || scope.row.quantity == ''">
                                        <span>-</span>
                                    </div>
                                    <div v-else>
                                        <span>{{ scope.row.quantity }}</span>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="quantity" :label="this.$t('表格.库存')" sortable="custom" >
                            <template #default="scope">
                                <div style="font-size: 14px">
                                    <div v-if="scope.row.quantity == null || scope.row.quantity == ''">
                                        <span>-</span>
                                    </div>
                                    <div v-else>
                                        <span>{{ scope.row.quantity }}</span>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div> -->
    </div>
</template>

<script>
import * as echarts from 'echarts';
import {getUser} from '../apis/user'
import {getDetails} from '../apis/gb'
import TableCell2 from '../components/TableCell2.vue'
import { ElMessage } from 'element-plus';
    export default{
        name: 'MyComponent',
        components: {
            TableCell2 // 注册
        },
        data(){
            return {
                isGetData:false,
                isVip:false,
                stmbol:'',
                params:{
                    goodsId:null,
                    regionId:null
                },
                goods:{},
                activeName:'1',
                activeName1:'3',
                dataX:[],
                dataY1:[],
                myChart1:null,
                myChart3:null,
                history:[],
                reTry:3,
                sku:[
                    {
                        skuId:'',
                        price:3.24,
                        thumbUrl:'https://img.kwcdn.com/product/open/2023-07-10/1688964960017-6e85189439864a09b6a7d1e46aa964c4-goods.jpeg',
                        quantity:1000,
                        specs:[{specKey:'颜色',specValue:'白色'}]
                    },{
                        skuId:'',
                        price:4.22,
                        thumbUrl:'https://img.kwcdn.com/product/open/2023-07-10/1688964959811-0681ad2344994a08a15735af9d42813f-goods.jpeg',
                        quantity:1000,
                        specs:[{specKey:'颜色',specValue:'pink'}]
                    },
                ],
                userInfo:{
                "name": "",
                "invite_code": "",
                "email": "",
                "subscription": "",
                "expired_at": "",
                "is_active": false,
                "register_date":''
              },
                lastUrl:null,
                isLogin:false
            }
        },
        created(){
            // this.$gtm.trackView({ page: this.$route.path,gtm: this.$route.meta.gtm });
            const id1 = this.$route.query.goodsId;
            const id2 = this.$route.query.regionId;
            const url = this.$route.query.returnUrl;
            this.params.goodsId = id1
            this.params.regionId = id2
            if(url.indexOf('rank') !== -1){
              this.lastUrl =url.substring(url.indexOf('rank') + 4)
              console.log(this.lastUrl); // 输出: '2'
            }
            // 取token 判断是否是登录状态
            const token = localStorage.getItem('token')
            this.isLogin = !!token;
        },
        mounted(){
            // const additionalData = this.$route.meta.gtmAdditionalEventData || {};
            this.$gtm.trackView({ page: this.$route.path,gtm: this.$route.meta.gtm });
            setTimeout(()=>{
                // this.drawPie()
            },1000);
            this.getGoodsDetail()
            
            // let a = JSON.parse(localStorage.getItem('myinfo'))
            // if(a.is_active!==false){
            //     this.isVip = true
            // }

          try {
            // 获取并解析存储在 localStorage 中的 myinfo 数据
            const jsonString = localStorage.getItem('myinfo');

            // 检查 jsonString 是否存在且不是空字符串
            if (jsonString) {
              const a = JSON.parse(jsonString);

              // 明确地检查 is_active 是否为 true
              if (a && typeof a.is_active === 'boolean' && a.is_active) {
                this.isVip = true;
              } else {
                this.isVip = false;
              }
            } else {
              this.getUserInfo()
              console.warn('No "myinfo" found in localStorage.');
              // this.isVip = false;
            }
          } catch (error) {
            console.error('Error parsing "myinfo" from localStorage:', error);
            // this.isVip = false; // 设置默认值或根据业务逻辑处理
          }


            this.symbol=localStorage.getItem("symbol")
        },
        methods:{
            // 获取用户信息
            getUserInfo(){
              getUser().then((res)=>{
                if(res.code == 200 && res.status == 1){
                  console.log(res)
                  this.userInfo = res.data
                  localStorage.setItem('myinfo',JSON.stringify(this.userInfo))
                  this.isVip = this.userInfo.is_active;
                }
              })
            },
            getGoodsDetail(){
                getDetails(this.params).then((res)=>{
                    if(res.code == 200 && res.status == 1){
                        this.reTry = 3
                        this.goods = res.data.lists.goods
                        this.history = res.data.lists.history
                        this.history.forEach(item=>{
                        let str =item.createTime.slice(5,10)
                            this.dataX = this.dataX.concat(str)
                            this.dataY1 = this.dataY1.concat(item.sold)
                        })
                        this.isGetData = true
                        this.drewLine(this.activeName,this.$t('总销量'),this.dataY1)//宏任务
                        this.drowLine3()
                    }
                }).catch((error)=>{
                    console.log(this.$t('响应detail数据失败'), error);
                    setTimeout(()=>{
                        if(this.reTry > 0){
                            this.reTry--;
                            this.getGoodsDetail();
                        }else if(this.reTry == 0){
                            this.isSuccess = true
                                ElMessage({
                                message:this.$t('响应detail数据失败'),
                                grouping:true,
                                type:'error'
                            })
                        }
                    },1000)
                })
            },
            drewLine(i,name,dataY){
                if(document.getElementById('line'+i) ===null){
                return;
                }
                this.myChart1 = echarts.init(document.getElementById('line'+i));
                this.myChart1.setOption({
                xAxis: {
                    type: 'category',
                    data: this.dataX
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                    name:name,
                    data: dataY,
                    type: 'line',
                    smooth: true,
                    areaStyle: {}
                    }
                ],
                tooltip: {
                    name:name,
                    // trigger: 'axis',
                    // axisPointer: { type: 'cross' }
                },
                })
            },
            drowLine1(){
                // const that =this;
                let dataX = []
                let dataY = []
                this.history.forEach(item=>{
                    let str =item.createTime.slice(5,10)
                    dataX = dataX.concat(str)
                    dataY = dataY.concat(item.sold)
                })
                console.log(dataX,dataY)
                if(document.getElementById('line1') ===null){
                    return;
                }
                this.myChart1 = echarts.init(document.getElementById('line1'));
                this.myChart1.setOption({
                    xAxis: {
                        type: 'category',
                        data: dataX
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: this.$t('总销量'),
                            data: dataY,
                            type: 'line',
                            smooth: true,
                            areaStyle: {}
                        }
                    ],
                    tooltip: {
                        name: this.$t('总销量'),
                        // trigger: 'axis',
                        // axisPointer: { type: 'cross' }
                    },
                })
            },
            drowLine3(){
              // const that =this;
              let dataX = []
              let dataY1 = []
              let dataY2 = []
              this.history.forEach(item=>{
                let str =item.createTime.slice(5,10)
                dataX = dataX.concat(str)
                dataY1 = dataY1.concat(item.minPrice)
                dataY2 = dataY2.concat(item.maxPrice)
              })
              if(document.getElementById('line3') ===null){
                return;
              }
              this.myChart3 = echarts.init(document.getElementById('line3'));
              this.myChart3.setOption({
                tooltip: {
                  // name: this.$t('价格'),
                //   trigger: 'axis'
                  // axisPointer: { type: 'cross' }
                },
                legend: {
                  data: [this.$t('最低价格'), this.$t('最高价格')]
                },
                // toolbox: {
                //   feature: {
                //     saveAsImage: {}
                //   }
                // },
                xAxis: {
                  type: 'category',
                  data: dataX,
                  boundaryGap: false,
                },
                yAxis: {
                  type: 'value'
                },
                series: [
                  {
                    name: this.$t('最低价格'),
                    data: dataY1,
                    type: 'line',
                    stack: 'Total',
                    // smooth: true,
                  },{
                    name: this.$t('最高价格'),
                    data: dataY2,
                    type: 'line',
                    stack: 'Total',
                    // smooth: true,
                  }
                ],

              })
            },
            handleClick(tab,event){
              console.log("11111",tab.props.label, event)
              setTimeout(()=>{
                if(tab.props.name !=="3"){
                  let dataY = [];
                  let historyPrpos ;
                  switch (tab.props.name){
                    case "1":
                      historyPrpos ="sold";
                      break;
                    case "2":
                      historyPrpos ="sales";
                      break;
                    case "4":
                      historyPrpos ="daySold";
                      break;
                    case "5":
                      historyPrpos ="weekSold";
                      break;
                    case "6":
                      historyPrpos ="monthSold";
                      break;
                    case "7":
                      historyPrpos ="daySales";
                      break;
                    case "8":
                      historyPrpos ="weekSales";
                      break;
                    case "9":
                      historyPrpos ="monthSales";
                      break;
                    case "10":
                      historyPrpos ="quantity";
                      break;
                    case "11":
                      historyPrpos ="goodsScore";
                      break;
                    case "12":
                      historyPrpos ="reviewNum";
                      break;
                    default :
                      historyPrpos ="daySalesRate";
                      break;
                  }
                  this.history.forEach(item=>{
                    dataY = dataY.concat(item[historyPrpos])
                  })
                  console.log(tab.props.label)
                  this.drewLine(tab.props.name,tab.props.label,dataY)//宏任务
                }
                else{
                  //特殊处理3
                  this.drowLine3()
                }
              },0);
            },
            drawPie(){
                this.myChart2 = echarts.init(document.getElementById('pieChart'));
                this.myChart2.setOption({
                    tooltip: {
                        trigger: 'item'
                    },
                    series: [
                        {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            { value: 1048, name: 'Search Engine' },
                            { value: 735, name: 'Direct' },
                            { value: 580, name: 'Email' },
                            { value: 484, name: 'Union Ads' },
                            { value: 300, name: 'Video Ads' }
                        ],
                        emphasis: {
                            itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                        }
                    ]
                })
            },
            // 返回
            backLast(){
                // this.$router.back()
                const returnUrl = this.$route.query.returnUrl;
                if (returnUrl) {
                    window.location.href = returnUrl; // 返回到记录的 URL
                } else {
                    alert('Unable to return to the main page, please manually return.');
                }
            },
          // 跳转到订阅页面
          shiftReserve(){
            this.$router.push('/subscribe/price')
          },
        }
    }
</script>

<style lang="scss" scoped>
.detail3-card{
    margin: 1rem 0 0 3rem;
    padding: 1rem;
    box-sizing: border-box;
    width: 85rem;
    min-height: 32.5rem;
    border-radius: 0.31rem;
    background-color: rgba(255, 255, 255, 1);
    .detail3-card-title{
        width: 19.38rem;
        height: 1.88rem;
        line-height: 1.88rem;
        color: rgba(16, 16, 16, 1);
        font-size: 1.25rem;
        font-weight: 600;
        text-align: left;
        font-family: AlibabaPuHui-medium;
    }
}
/* el-divider 修改高度效果 */
.el-divider--horizontal{
     margin: 1rem 0;
     border-top: 0.1rem solid #f2f3f5;
 }
 .custom-tab-label{
    padding: 0.5rem 0.5rem;
    /*width: 2.625rem;*/
    height: 1.5rem;
    font-size: 0.8rem;
    white-space: nowrap;
 }
 :deep(.el-tabs__header .el-tabs__item) {
  padding: 0 0.5rem;
}
.can-not-show{  
    margin-top: 3rem;
    /*width: 36.25rem;*/
    height: 3.13rem;
    line-height: 3.13rem;
    color: rgba(16, 16, 16, 1);
    font-size: 1rem;
    font-family: AlibabaPuHui-regular;
}
.back-btn{
    margin-left: 58rem;
    width: 5rem;
    height: 1.88rem;
    border-radius: 0.25rem;
    background-color: rgba(22, 93, 255, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 0.88rem;
    text-align: center;
    font-family: Microsoft Yahei;
  }
</style>